<template>
	<view>
		<view class="header1">
			<text
				style="font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size:24px; margin-right: 10rpx;">6498</text>
			<text>可用积分</text>
		</view>
		<view class="ct1">
			<view style="font-size: 13px; font-weight: 400; color: rgb(100,101,102); width: 30%; height: 100%; display: flex; align-items: center;justify-content: center;">
				兑换现金
			</view>
			<input type="text" placeholder="你希望用多少积分来兑换余额">
		</view>
		<view class="foot1">
			规则: 100 积分兑换100金额，兑换成功后，可以在我的钱包查看。
		</view>
		<view class="foot2">
			<button>立即兑换</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
		
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
page {
	background-color: rgb(247,248,250);
}
	.header1 {
		height: 140rpx;
		background-image: linear-gradient(90deg, rgb(107, 108, 133), rgb(58, 64, 83));
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;

		text {
			color: #fff;
			font-weight: 500;
			font-size: 20rpx;
		}
	}
	.ct1{
		width: 100%;
		height: 100rpx;
		display: flex;
		background-color: #fff;
		input{
			padding: 33rpx 0 0 0;
			font-size: 13px;
		
		}
			
		::-webkit-input-placeholder{
			color: #eee;
		}
	}
	.foot1{
	    padding: 2.67vw 4vw;
	    font-size: 3.2vw;
	    color: #ccc;
	}
	.foot2{
		width: 100%;
		height: 100rpx;
		background-color: #fff;
     position: absolute;
	 bottom: 0;
	 box-shadow: 0 0 5rpx #ccc;
	 display: flex;
	 align-items: center;
	 justify-content: center;
		 
	 button{
		 color: #fff;
		 background-color: rgb(27,167,132);
		 height: 70rpx;
		 width: 400rpx;
		 display: flex;
		 align-items: center;
		 justify-content: center;
		 font-size: 13px;
		 font-weight: 400;
	 }
	}
</style>